<template>
    <div v-if="item.id" class="preview">
        <img class="preview__close" src="@/assets/img/kanke/material/close.png" alt="close" @click="closeModal">
        <component class="preview__content" v-if="item.file_url" :is="getCompoentName()" :url="item.file_url"
            :file_id="item.file_id" :sign="item.sign" />
    </div>
</template>
<script>
import PreviewImg from './PreviewImg.vue'
import PreviewAudio from './PreviewAudio.vue';
import PreviewVideo from './PreviewVideo.vue';

export default {

    name: "Preview",
    components: {
        PreviewImg,
        PreviewAudio,
        PreviewVideo,
    },
    props: {
        item: {
            type: Object,
            default() {
                return {}
            }
        },
        close: {
            type: Function
        }
    },
    data() {
        return {

        }

    },
    mounted() {
        console.log(this.item.file_id)
    },
    methods: {
        getCompoentName() {
            const typeMap = {
                2: 'PreviewVideo',
                3: 'PreviewAudio',
                4: 'PreviewImg'
            }
            return typeMap[this.item.type]
        },
        closeModal() {
            this.$emit('close');
        }
    }

}
</script>
<style lang="scss" scoped>
.preview {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    background-color: rgba(0, 0, 0, .5);

    &__close {
        position: absolute;
        top: 100px;
        right: 200px;
        cursor: pointer;
    }

    &__content {
        position: absolute;
        top: 200px;
        left: 50%;
        transform: translateX(-50%);
    }

}
</style>